﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
   String path = request.getContextPath();
   String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/resources/";
%>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="ie ie6 lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="ie ie7 lt-ie9 lt-ie8"        lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="ie ie8 lt-ie9"               lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="ie ie9"                      lang="en"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-ie">
<!--<![endif]-->

<head>
   <base href="<%=basePath%>">
   <!-- Meta-->
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
   <meta name="description" content="">
   <meta name="keywords" content="">
   <meta name="author" content="">
   <title>个人中心</title>
   <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
   <!--[if lt IE 9]><script src="js/html5shiv.js"></script><script src="js/respond.min.js"></script><![endif]-->
   <!-- Bootstrap CSS-->
   <link rel="stylesheet" href="app/css/bootstrap.css">
   <!-- Vendor CSS-->
   <link rel="stylesheet" href="vendor/fontawesome/css/font-awesome.min.css">
   <link rel="stylesheet" href="vendor/animo/animate+animo.css">
   <link rel="stylesheet" href="vendor/csspinner/csspinner.min.css">
   <!-- START Page Custom CSS-->
   <link rel="stylesheet" href="vendor/slider/css/slider.css">
   <link rel="stylesheet" href="vendor/chosen/chosen.min.css">
   <link rel="stylesheet" href="vendor/datetimepicker/css/bootstrap-datetimepicker.min.css">
   <!-- Codemirror -->
   <link rel="stylesheet" href="vendor/codemirror/lib/codemirror.css">
   <!-- Bootstrap tags-->
   <link rel="stylesheet" href="vendor/tagsinput/bootstrap-tagsinput.css">
   <!-- END Page Custom CSS-->
   <!-- App CSS-->
   <link rel="stylesheet" href="app/css/app.css">
   <!-- Modernizr JS Script-->
   <script src="vendor/modernizr/modernizr.js" type="application/javascript"></script>
   <!-- FastClick for mobiles-->
   <script src="vendor/fastclick/fastclick.js" type="application/javascript"></script>

</head>

<body>
<!-- START Main wrapper-->
<section class="wrapper">
   <!-- START Top Navbar-->
   <nav role="navigation" class="navbar navbar-default navbar-top navbar-fixed-top">
      <!-- START navbar header-->
      <div class="navbar-header">
         <a href="/page/showCar" class="navbar-brand">
            <div class="brand-logo">旧车交易</div>
         </a>         </div>
      <!-- END navbar header-->
      <!-- START Nav wrapper-->
      <div class="nav-wrapper">
         <!-- START Left navbar-->
         <ul class="nav navbar-nav">
            <li>
               <a href="#" data-toggle="aside">
                  <em class="fa fa-align-left"></em>                  </a>               </li>
         </ul>
         <!-- END Left navbar-->
         <!-- START Right Navbar-->
         <ul class="nav navbar-nav navbar-right">
            <li>
               <a href="#" data-toggle="navbar-search">
                  <em class="fa fa-search"></em>                  </a>               </li>
         </ul>
         <!-- END Right Navbar-->
      </div>
      <!-- END Nav wrapper-->
   </nav>
   <!-- END Top Navbar-->
   <!-- START aside-->
   <aside class="aside">
      <!-- START Sidebar (left)-->
      <nav class="sidebar">
         <ul class="nav">
            <!-- START user info-->
            <li>
               <div data-toggle="collapse-next" class="item user-block has-submenu">
                  <!-- User picture-->
                  <div class="user-block-picture">
                     <img src="app/img/user/02.jpg" alt="Avatar" width="60" height="60" class="img-thumbnail img-circle">
                     <!-- Status when collapsed-->
                     <div class="user-block-status">
                        <div class="point point-success point-lg"></div>
                     </div>
                  </div>
                  <!-- Name and Role-->
                  <div class="user-block-info">
                     <span class="user-block-name item-text">尊敬的用户，欢迎您！</span>

                  </div>
               </div>
               <!-- START User links collapse-->
               <ul class="nav collapse">
                  <li><a href="${basePath}/usercenter/updatepassword">密码修改 </a></li>
                  <li class="divider"></li>
                  <li><a href="/usercenter/out">退出</a>                     </li>
               </ul>
               <!-- END User links collapse-->
            </li>
            <!-- END user info-->
            <!-- START Menu-->
            <li>
               <a href="${basePath}/usercenter/userinfo?action=show" title="Dashboard" data-toggle="" class="no-submenu">

                  <span class="item-text">个人信息</span>                  </a>
            </li>
            <li>
               <a href="#" title="Tables" data-toggle="collapse-next" class="has-submenu">

                  <span class="item-text">作为买方</span>                  </a>
               <!-- START SubMenu item-->
               <ul class="nav collapse ">
                  <li>
                     <a href="/page/order">
                        <span class="item-text">未完成订单</span>                        </a>                     </li>
                  <li>
                     <a href="/page/bhistory">
                        <span class="item-text">历史订单</span>                  </a>
                  </li>
               </ul>
            </li>
            <li style="background:gray;">
               <a href="#" title="Tables" data-toggle="collapse-next" class="has-submenu"
                  style="color:white; box-shadow: 0px 1px 10px rgba(0,0,0,.8);">

                  <span class="item-text" style="font-size:17px;">作为卖方</span>                  </a>
               <!-- START SubMenu item-->
               <ul class="nav collapse ">
                  <li>
                     <a href="/page/shistory">
                        <span class="item-text">已售出车辆信息</span>                        </a>                     </li>
                  <li>
                  <li style="background:gray;">
                     <a href="/page/check_order" style="color:white; box-shadow: 0px 1px 10px rgba(0,0,0,.8);">
                        <span class="item-text" style="font-size:17px;">订单确认</span>                        </a>                     </li>
                  <li>
                     <a href="/page/check_car" >
                        <span class="item-text">我发布的车辆信息</span>                  </a>
                  </li>
               </ul>
            </li>

            <li>
               <a href="/page/collection" title="Standard" >

                  <span class="item-text">购物车</span>                  </a>
            </li>
            <li>
               <a href="${basePath}/page/showCar" title="Pages" data-toggle="" class="no-submenu">


                  <span class="item-text">返回首页</span>                  </a>
            </li>
            <!-- END Menu-->

            <!-- Sidebar footer    -->
            <li class="nav-footer">
               <div class="nav-footer-divider"></div>
               <!-- START button group-->
               <div class="btn-group text-center">
                  <button type="button" data-toggle="tooltip" data-title="退出" class="btn btn-link" onclick="window.location.href='/usercenter/out'">退出</button>
               </div>
               <!-- END button group-->
            </li>
         </ul>
      </nav>
      <!-- END Sidebar (left)-->
   </aside>
   <!-- End aside-->
   <!--XXX1-->
   <section>
      <!-- START Page content-->
      <section class="main-content">
         <h3>未完成订单
            <br>
            <small>可查阅尚未完成的订单信息</small>
         </h3>
         <!-- START panel-->
         <div class="panel panel-default">
            <div class="panel-heading">未完成订单
               <a href="#" data-perform="panel-dismiss" data-toggle="tooltip" title="Close Panel" class="pull-right">
                  <em class="fa fa-times"></em>
               </a>
               <a href="#" data-perform="panel-collapse" data-toggle="tooltip" title="Collapse Panel" class="pull-right">
                  <em class="fa fa-minus"></em>
               </a>
            </div>
            <!-- START table-responsive-->
            <div class="table-responsive">
               <table id="table-id" class="table table-bordered table-hover">
                  <thead>
                  <tr class="table-th">
                     <th>订单编号</th>
                     <th>汽车编号</th>
                     <th>基本信息</th>
                     <th>售价</th>
                     <th>预付定金</th>
                     <th>买家id</th>
                     <th>买家联系方式</th>
                     <th>验车地址</th>
                     <th>订单发布时间</th>
                     <th>状态</th>
                     <th>操作</th>
                  </tr>
                  <thead>
                  <tbody id= "table-tbody" class="table-tbody">
                  <c:forEach items="${itemsList}" var="item">
                     <tr>
                           <td>${item.order.orderId}</td>
                           <td><a href="/page/details?id=${item.order.carId}">${item.order.carId}</a></td>
                           <td>${item.order.baseinfo }</td>
                           <td>${item.order.carPrice}</td>
                           <td>${item.order.deposit}</td>
                           <td>${item.order.buyerId}</td>
                           <td>${item.phone}</td>
                           <td>${item.order.address}</td>
                           <td><fmt:formatDate value="${item.order.orderTime}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
                           <td>${item.order.orderStatus}</td>
                           <td><a href="javascript:void(0)" onclick='confirmation("${item.order.orderId}","${item.unameSeller}","${item.phoneSeller}","${item.unameBuyer}","${item.phone}","${item.carInfo.brand}","${item.carInfo.confName}","${item.carInfo.price}","${item.carInfo.address}")'>确认</a></td>
                           <a href="/order/confirmation?id=${item.order.orderId}" id='aTagClick${item.order.orderId}' style="display: none"></a>
                        </tr>
                  </c:forEach>
                  </tbody>
               </table>
            </div>
            <!-- END table-responsive-->
            <div class="panel-footer">
               <div class="row">
                  <div class="col-lg-2">
                     <div class="input-group">

                     </div>
                  </div>
                  <div class="col-lg-8"></div>

               </div>
            </div>
         </div>
         <!-- END panel-->
      </section>
      <!-- END Page content-->
   </section>
</section>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header" style="text-align:center">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title">个人二手车买卖合同</h4>
         </div>
         <div class="con_main" id="contentText" style="margin: 20px;">
            <p>甲方(出卖人)：<span id="unameSeller" style="text-decoration:underline"></span></p>
            <p>联系电话：<span id="phoneSeller" style="text-decoration:underline"></span></p>
            <p>乙方(买受人)：<span id="unameBuyer" style="text-decoration:underline"></span></p>
            <p>联系电话：<span id="phone" style="text-decoration:underline"></span></p>
            <p>甲、乙双方依据《中华人民共和国合同法》及其他有关法律法规的规定，在平等、自愿、协商一致的基础上，就买卖汽车事宜，订立本合同。</p>
            <p>第一条标的</p>
            <p>汽车品牌：<span id="brand" style="text-decoration:underline"></span></p>
            <p>型号：<span id="confName" style="text-decoration:underline"></span></p>
            <p>第二条数量与价款</p>
            <p>车辆单价：<span id="price" style="text-decoration:underline"></span>万元。</p>
            <p>车辆交付后，乙方如需委托甲方代理上牌等服务的，双方应另签委托服务备忘录(见附件一)，乙方需另行交付有关费用和支付劳务报酬。</p>
            <p>第三条付款方式</p>
            <p>乙方选择下述第_________种方式付款，并按该方式所定时间如期足额将车款支付给甲方。</p>
            <p>1、一次性付款方式：签署本合同时，支付全部车价款，计人民币_________万元，大写_________。</p>
            <p>2、车辆抵押贷款方式：</p>
            <p>2.1签署本合同时，支付全部车价款的_________%，计人民币_________万元，大写_________。</p>
            <p>2.2_________年_________月_________日前，办妥抵押贷款手续后支付余款，计人民币_________万元，大写_________。</p>
            <p>3、其他付款方式：_________。</p>
            <p>4、车辆交付时，定金可以抵作车价款。</p>
            <p>第四条质量</p>
            <p>甲方向乙方出售的车辆，其质量必须符合国家有关规定，必须能通过落籍地公安交通管理部门的检测，可以上牌行驶的汽车。</p>
            <p>第五条交车时间与地点、交付及验收方式</p>
            <p>1、交车时间：_________年_________月_________日前。</p>
            <p>2、提车方式：乙方自提甲方送车上门</p>
            <p>3、交车地点：<span id="address" style="text-decoration:underline"></span></p>
            <p>4、车辆交接时当场验收，乙方应对所购车辆外观和基本使用功能等进行认真检查、确认。如对外观有异议，应当场向甲方提出。</p>
            <p>5、甲方向乙方交付汽车及随车文件，双方签署车辆交接书(见附件二)，即为该车辆正式交付。</p>
            <p>6、车辆正式交付之时起，该车辆的所有权和风险责任由甲方转移至乙方。</p>
            <p>第六条定金</p>
            <p>1、双方约定：本合同签订时，乙方应向甲方支付定金_________万元，大写_________。</p>
            <p>2、乙方不能按约支付车款的，无权要求返还定金。甲方不能按约交付约定车辆的，应当双倍返还定金。</p>
            <p>第七条双方特别约定：_________</p>
            <p>第八条违约责任</p>
            <p>1、乙方未按合同约定的时间付款，按逾期时间分别处理(不作累加)。</p>
            <p>1.1逾期在_________天之内，乙方向甲方支付逾期应付款的万分之_________违约金。</p>
            <p>1.2逾期超过_________天后，甲方有权单方面通知乙方终止本合同，乙方应按相当于全部车款的_________%，向甲方支付违约金。</p>
            <p>2、甲方未按本合同约定的期限交付约定的车辆，按逾期期限分别处理(不作累加)。</p>
            <p>2.1逾期在_________天之内，甲方按日向乙方支付已付车价款的万分之_________违约金。</p>
            <p>2.2逾期超过_________天后，乙方有权单方面通知甲方终止本合同，甲方应按相当于全部车价款的_________%向乙方支付违约金。</p>
            <p>3、对上述违约事项，双方有定金约定的，一方违约时，对方既可以选择适用违约金条款，也可以选择适用定金条款，但只能在二者之中选择其一。</p>
            <p>4、甲、乙双方的任何一方由于不可抗力的原因不能履行本合同时，应及时向对方通报不能履行或不能完全履行的理由，并应在10日内提供证明，允许延期履行、部分履行或者不履行合同，并根据情况可部分或全部免予承担违约责任。</p>
            <p>5、乙方所购汽车的整车质量保证期限为_________年_________万公里，两者以先到者为限，除非不属于保证范围内。在保修期内出现质量问题，应当到甲方或生产厂指定的特约维修站进行维修、保养。</p>
            <p>第九条解决争议的方法</p>
            <p>甲乙双方在履行本合同过程中发生争议，应协商解决，也可请求台州市汽车经营行业协会或甲方所在地消费者协会主持调解。协商不能解决或调解不成的，选定下面第_________种方式解决：</p>
            <p>1、向_________仲裁委员会申请仲裁。</p>
            <p>2、依法向人民法院起诉。</p>
            <p>第十条其他</p>
            <p>1、双方前列地址、电话若有改变，必须及时书面通知对方。</p>
            <p>2、本合同的未尽事宜及本合同在履行过程中需变更的事宜，双方应通过订立补充条款或补充协议进行约定。本合同的补充条款、补充协议及附件均为本合同不可分割的部分。</p>
            <p>3、本合同及其补充条款、补充协议及附件中的手写文字与打印文字有矛盾时，以手写文字为准。</p>
            <p>第十一条生效</p>
            <p>本合同自双方签字或盖章之日起生效，本合同壹式贰份，具有同等效力。其中甲、乙双方各执壹份。</p>
            <p>甲方(盖章)：_________乙方(盖章)：_________</p>
            <p>代理人(签字)：_________代理人(签字)：_________</p>
            <p>_________年____月____日_________年____月____日</p>
         </div>
         <div class="modal-footer">
            <span id="orderId" style="display:none;"></span>
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" onclick="agree()">同意</button>
         </div>
      </div>
   </div>
</div>
<!-- END Main wrapper-->
<!-- START Scripts-->
<!-- Main vendor Scripts-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Plugins-->
<script src="vendor/chosen/chosen.jquery.min.js"></script>
<script src="vendor/slider/js/bootstrap-slider.js"></script>
<script src="vendor/filestyle/bootstrap-filestyle.min.js"></script>
<!-- Animo-->
<script src="vendor/animo/animo.min.js"></script>
<!-- Sparklines-->
<script src="vendor/sparklines/jquery.sparkline.min.js"></script>
<!-- Slimscroll-->
<script src="vendor/slimscroll/jquery.slimscroll.min.js"></script>
<!-- START Page Custom Script-->
<!-- Markdown Area Codemirror and dependencies -->
<script src="vendor/codemirror/lib/codemirror.js"></script>
<script src="vendor/codemirror/addon/mode/overlay.js"></script>
<script src="vendor/codemirror/mode/markdown/markdown.js"></script>
<script src="vendor/codemirror/mode/xml/xml.js"></script>
<script src="vendor/codemirror/mode/gfm/gfm.js"></script>
<script src="vendor/marked/marked.js"></script>
<!-- MomentJs and Datepicker-->
<script src="vendor/moment/min/moment-with-langs.min.js"></script>
<script src="vendor/datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<!-- Tags input-->
<script src="vendor/tagsinput/bootstrap-tagsinput.min.js"></script>
<!-- Input Mask-->
<script src="vendor/inputmask/jquery.inputmask.bundle.min.js"></script>
<!-- END Page Custom Script-->
<!-- App Main-->
<script src="app/js/app.js"></script>
<!--XXX2-->
<script type="text/javascript">
   //同意
   function agree(){
      var orderId =  $('#orderId').html()
      document.getElementById("aTagClick"+orderId).click()
      $('#myModal').modal('hide')
   }
    //卖方同意
    function confirmation(orderId,unameSeller,phoneSeller,unameBuyer,phone,brand,confName,price,address){
        $('#myModal').modal('show')
        $('#orderId').html(orderId)
        $("#unameSeller").html(unameSeller)
        $("#phoneSeller").html(phoneSeller)
        $("#unameBuyer").html(unameBuyer)
        $("#phone").html(phone)
        $("#brand").html(brand)
        $("#confName").html(confName)
        $("#price").html(price)
        $("#address").html(address)
    }
   $(function(){
       function showDialog() {
           var user = "${user}";  //若session无user值 判为游客登录 返回登录界面
           if(user=="" || user==null) {
               alert("请先登录");
               window.location.href="/login/login"
           }
           g('dialogMove').style.display = 'block';
           autoCenter(g('dialogMove'));
       }
      var discussListDom = $("#table-id").find("#table-tbody");
      $("#table-id").on("click","a#check",function(){
//               var tbval = $(this).closest("tr").find("td:first-child").val();
         var tbval = $(this).closest("tr").find("td:first-child").html();
         // console.log(tbval);
         $.ajax({
            type:"post",
            url:"../order/confirmation",
            data:{id:tbval},
            success:function(data){
//                       alert(JSON.stringify(data));
               addDiscuss(data, discussListDom);
            }
         });
      });
      function addDiscuss(data, discussListDom) {
//            discussListDom.children().removeAll();

         discussListDom.find("tr").remove();
//            alert(data.length);
         for (var i = 0; i < data.length; i++) {
            var liDom=$("<tr></tr>");
            <%--var message="<td>${data[i].order.orderId}</td><td>AA</td>";--%>
            message = "<td>"+data[i].order.orderId+"</td>"+
                    "<td>"+data[i].order.carId+"</td>"+
                    "<td><a href='/page/details?id="+data[i].order.carId+"'>"+data[i].order.baseinfo+"</a></td>"+
                    "<td>"+data[i].order.carPrice+"</td>"+
                    "<td>"+data[i].order.deposit+"</td>"+
                    "<td>"+data[i].order.buyerId+"</td>"+
                    "<td>"+data[i].phone+"</td>"+
                    "<td>"+data[i].order.address+"</td>"+
                    "<td>"+data[i].order.orderTime+"</td>"+
                    "<td>"+data[i].order.orderStatus+"</td>"+
                    "<td><a href='javascript:void(0);' id='check'>确认</a></td>";
//                   console.log(liDom.html());
            liDom.html(message);
//                   console.log(liDom.html());
            discussListDom.append(liDom);
         }
      };
   });
</script>
<!-- END Scripts-->
</body>

</html>